//财务总览

<template>
    <div>
        <el-col :span="20">
            <el-row >
                <el-col :span="20">
                    <div class="ls-nav grid-content bg-purple">
                        <b>财务管理</b>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="ls-d1">
                        <span>累计收入（截至今日0点）</span>
                        <b>￥509.98</b>
                        <button class="btn">收支明细</button>
                    </div>
                    <div class="ls-d2">
                        <span>昨日收入</span>
                        <b>￥59.98</b>
                    </div>
                    <div class="ls-d3">
                        <span>七日收入</span>
                        <b>￥509.98</b>
                    </div>
                    <div class="ls-d4">
                        <span>待结算总额 （截至今日0点）</span>
                        <b>￥809.98</b>
                        <button class="btn1">结算记录</button>
                    </div>
                </el-col>
            </el-row>
            <br>
            <hr>
            <br>
            <el-row >
                <el-col :span="24" :offset="1">
                    <el-tabs type="border-card">
                        <el-tab-pane>
                            <span slot="label"><i class="el-icon-date"></i> 账户明细</span>
                            <el-col :span="2">
                            </el-col>
                            <template>



                                <el-col :span="5" :offset="1">
                                    <el-input v-model="search" placeholder="请输入客户昵称" size="mini" ></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" round size="mini" @click="searchBtn">搜索</el-button>
                                </el-col>





                                <el-table
                                        ref="multipleTable"
                                        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                        tooltip-effect="dark"
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            width="30"
                                            align="center"
                                    ></el-table-column>
                                    <el-table-column
                                            prop="mc"
                                            label="商品名称"
                                            sortable
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="time"
                                            label="支付时间"
                                            width="110">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dd"
                                            label="订单号"
                                            width="110"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="nc"
                                            label="客户昵称"
                                            width="110">
                                    </el-table-column>
                                    <el-table-column
                                            prop="money"
                                            label="金额（元）"
                                            width="130">
                                    </el-table-column>
                                    <el-table-column
                                            prop="zt"
                                            label="状态"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="cz"
                                            label="操作"
                                            width="100">
                                        <template>
                                            <button class="btn4" @click="handShow">详情</button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane label="结算记录">
                            <template>
                                <el-col :span="5" :offset="1">
                                    <el-input v-model="search" placeholder="请输入客户昵称" size="mini" ></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" round size="mini" @click="searchBtn">搜索</el-button>
                                </el-col>
                                <el-table
                                        ref="multipleTable"
                                        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                        tooltip-effect="dark"
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            width="30"
                                            align="center"
                                    ></el-table-column>
                                    <el-table-column
                                            prop="mc"
                                            label="商品名称"
                                            sortable
                                            width="130">
                                    </el-table-column>
                                    <el-table-column
                                            prop="time"
                                            label="支付时间"

                                            width="130">
                                    </el-table-column>
                                    <el-table-column
                                            prop="dd"
                                            label="订单号"
                                            width="135"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="nc"
                                            label="客户昵称"
                                            width="130">
                                    </el-table-column>
                                    <el-table-column
                                            prop="money"
                                            label="金额（元）"
                                            width="130">
                                    </el-table-column>
                                    <el-table-column
                                            prop="cz"
                                            label="操作"
                                            width="120">
                                        <button class="btn4" @click="handShow">详情</button>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="22" :offset="8">
                    <div class="block">
                        <el-pagination
                                layout="prev, pager, next"
                                :total="total"
                                :page-size= pagesize
                                @current-change="current_change">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>

        </el-col>
    </div>
</template>
<style lang="less">
    .btn4{
        border: none;
        background:white ;
        cursor: pointer;
        outline: none;
    }

        /*详情代码*/
    .ls-cz{
        position: absolute;
        left: 800px;
        top: 147px;
    }
    .ls-cz a{
        text-decoration: none;
        color: #606266;
        cursor: pointer;
        margin-top: 10px;
    }
    .ls-cz1{
        position: absolute;
        left: 800px;
        top: 218px;
    }
    .ls-cz1 a{
        text-decoration: none;
        color: #606266;
        cursor: pointer;
    }
    .ls-cz2{
        position: absolute;
        left: 800px;
        top: 290px;
    }
    .ls-cz2 a{
        text-decoration: none;
        color: #606266;
        cursor: pointer;
    }
    .ls-cz3{
        position: absolute;
        left: 800px;
        top: 361px;
    }
    .ls-cz3 a{
        text-decoration: none;
        color: #606266;
        cursor: pointer;
    }
    .ls-cz4{
        position: absolute;
        left: 800px;
        top:432px;
    }
    .ls-cz4 a{
        text-decoration: none;
        color: #606266;
        cursor: pointer;
    }





    .el-table th>.cell{
        text-align: center;
    }
    .el-table .cell{
        text-align: center;
    }



        /*累计收入div*/
    .ls-nav{
        height: 50px;
        line-height: 50px;
    }
   .ls-d1{
       width: 280px;
       height: 150px;
       border: 1px solid black;
       position: relative;
       left: 50px;
       border-radius: 4px;
       float: left;
   }
    .ls-d1 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-d1 b{
        position:absolute;
        top: 80px;
        left: 30px;
        font-size: 20px;
    }
    .btn{
        position: absolute;
        top: 80px;
        left: 200px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
    }

    /*昨日收入代码*/
    .ls-d2{
        width: 120px;
        height: 150px;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        border-radius: 4px;
        position: absolute;
        left:330px;
    }
    .ls-d2 span{
        position: absolute;
        top: 30px;
        left: 30px;
    }
    .ls-d2 b{
        position:absolute;
        top: 80px;
        left: 20px;
        font-size: 20px;
    }
    /*七日收入代码*/
    .ls-d3{
        width: 120px;
        height: 150px;
        border: 1px solid black;
        border-radius: 4px;
        position: absolute;
        left:450px;
    }
    .ls-d3 span{
        position: absolute;
        top: 30px;
        left: 30px;
    }
    .ls-d3 b{
        position:absolute;
        top: 80px;
        left: 20px;
        font-size: 20px;
    }
    /*待结算金额*/
    .ls-d4{
        width: 320px;
        height: 150px;
        border: 1px solid black;
        position: absolute;
        left: 650px;
        border-radius: 4px;
        float: left;
    }
    .ls-d4 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-d4 b{
        position:absolute;
        top: 80px;
        left: 30px;
        font-size: 20px;
    }
    .btn1{
        position: absolute;
        top: 80px;
        left: 200px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
    }

    /*2个按钮，结算和账户明细*/
    .el-tabs__nav-wrap{
        width: 1000px;
    }
    .el-tabs__item{
        left: 12px;
    }
</style>

<script>
    import store from './../store'


    export default {
        name: "dataList",
        store,
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                total: 10,
                pagesize: 5,
                currentPage: 1,
                search:''
            }
        },
        methods: {
            // formatter(column, row) {
            //     return row.address;
            // },
            // filterTag(value, row) {
            //     return row.tag === value;
            // },
            addUser() {
                this.$axios.get('/api/financial', {
                    params: {}
                }).then((res) => {
                    for (let i = 0; i < res.data.data.length; i++) {
                        // var data=res.data.data[i];
                        let arr = {
                            mc: res.data.data[i].p_name,
                            time: res.data.data[i].c_time,
                            dd: res.data.data[i].orderid,
                            nc: res.data.data[i].u_title,
                            money: res.data.data[i].p_price,
                            zt: res.data.data[i].c_state,
                        };
                        this.tableData.push(arr);
                    }
                })
            },


            searchBtn() {
                if (this.search == null || this.search.length == 0) {
                    alert('不能为空')
                    this.tableData=[];
                    this.addUser()
                } else {
                    var x=this.search;
                   console.log(this.search)
                    this.$axios({
                        method:'get',
                        url:'/api/searchg',
                        params:{
                            searchName:x
                        }
                    }).then((res) => {
                        console.log(res)
                        this.tableData=[];
                        for (let i = 0; i < res.data.data.length; i++) {
                            // var data=res.data.data[i];
                            let arr = {
                                mc: res.data.data[i].p_name,
                                time: res.data.data[i].c_time,
                                dd: res.data.data[i].orderid,
                                nc: res.data.data[i].u_title,
                                money: res.data.data[i].p_price,
                                zt: res.data.data[i].c_state,
                            };
                            this.tableData.push(arr);
                        }
                    })

                }
                },


            current_change: function (currentPage) {
                this.currentPage = currentPage;
            },
            handShow:function () {

            },
            },
        mounted: function () {
            this.addUser()
        },

    }


</script>